<script setup>
import { ref } from "vue";
// 返回
const onClickLeft = () => history.back();
// 选项卡
const activeName = ref('a');
// 搜索框
const value = ref('');
const onSearch = (val) => {
    showToast(val)
};
const onClickButton = () => {
    console.log(123);
    
};
</script>
<template>
    <div class="language">
        <!-- 导航 -->
        <van-nav-bar background="#fff" title="花语大全" left-arrow @click-left="onClickLeft" />
        <!-- 选项卡 -->
        <van-tabs v-model:active="activeName" title-active-color="#fef8f9" title-inactive-color="#fff" line-width="0px">
            <van-tab title="花材" name="a">
                <!-- 搜索框 -->
                <van-search background="#f6f6f6" v-model="value" shape="round" show-action placeholder="请输入花材名称，如玫瑰"
                    @search="onSearch">
                    <template #action>
                        <div @click="onClickButton">搜索</div>
                    </template>
                </van-search>

                <!-- 玫瑰 -->
                <div class="rose" v-for="item in 2">
                    <div class="top">
                        <div class="top-left">
                            <img src="/public/langer-tx.png" alt="">
                        </div>
                        <div class="top-right">
                            <div class="one">玫瑰</div>
                            <div class="two">纯洁的爱、美丽的爱情、美好常在<van-icon name="arrow" /></div>
                            <div class="three">
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">恋人</van-tag>
                                </div>
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">情侣</van-tag>
                                </div>
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">伴侣</van-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottom-left" v-for="item in 4">
                            <img src="/public/langer1.png" alt="">
                            <div>￥234</div>
                        </div>
                    </div>
                </div>
                <div class="rose" v-for="item in 2">
                    <div class="top">
                        <div class="top-left">
                            <img src="/public/langer-tx.png" alt="">
                        </div>
                        <div class="top-right">
                            <div class="one">玫瑰</div>
                            <div class="two">纯洁的爱、美丽的爱情、美好常在<van-icon name="arrow" /></div>
                            <div class="three">
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">恋人</van-tag>
                                </div>
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">情侣</van-tag>
                                </div>
                                <div class="three-one">
                                    <van-tag plain round size="large" color="#000" type="primary">伴侣</van-tag>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </van-tab>
            <van-tab title="枝数" name="b">
                <!-- 搜索框 -->
                <van-search background="#f6f6f6" v-model="value" shape="round" show-action placeholder="请输入花材名称，如玫瑰"
                    @search="onSearch">
                    <template #action>
                        <div @click="onClickButton">搜索</div>
                    </template>
                </van-search>
                枝数
            </van-tab>
        </van-tabs>
        <!-- 盒子 -->
        <div class="box" style="height: 80px; background-color: #f6f6f6;"></div>
    </div>
</template>

<style lang="scss">
.language {

    /*导航 */
    .van-nav-bar__content {
        position: relative;
        height: 150px;
        background-image: url(/public/flower-bg.png);
        background-size: 100% 100%;

        /* 透明度为50% */
        .van-badge__wrapper {
            font-size: 18px;
            top: 10px;
            position: absolute;
            color: #fff;
        }

        .van-nav-bar__title {
            font-size: 18px;
            left: 41%;
            top: 10px;
            position: absolute;
            color: #fff;
        }
    }

    /*选项卡 */
    .van-tabs {
        width: 100%;
        margin: auto;
        position: relative;
        z-index: 1000;
        margin-top: -80px;

        #van-tabs-1-0 {
            margin-top: 1%;
            height: 90%;
            width: 50%;
            box-sizing: border-box;
            padding: 10px;
            border-right: 1px solid #000;
        }

        #van-tabs-1-1 {
            margin-top: 1%;
            height: 90%;
            width: 50%;
            box-sizing: border-box;
            padding: 10px;
        }

        .van-tabs__wrap {
            width: 50%;
            margin: auto;
            border-radius: 30px;

            .van-tab__text {
                color: red;
            }

        }

        .van-tabs__content {
            border-radius: 10px;
            margin-top: 40px;
            width: 100%;
            background-color: #f6f6f6;

            .van-tab__panel {

                /*搜索框 */
                .van-search {
                    --van-search-input-height: 40px;
                    --van-search-content-background: #fff;

                    .van-search__action {
                        right: 0;
                        position: absolute;
                        text-align: center;
                        width: 15%;
                        color: #fff;
                        background-color: #f96e75;
                        border-top-right-radius: 20px;
                        border-bottom-right-radius: 20px;
                    }
                }

                /*玫瑰 */
                .rose {
                    width: 96%;
                    margin: auto;
                    margin-top: 10px;
                    box-sizing: border-box;
                    background-color: #fff;
                    border-radius: 10px;
                    padding: 5px;
                    box-shadow: 0px 1px 1px #ccc;

                    .top {
                        width: 100%;
                        box-sizing: border-box;
                        padding: 3px;
                        display: flex;
                        justify-content: space-between;
                        padding-bottom: 10px;

                        .top-left {
                            width: 20%;
                            text-align: center;

                            img {
                                width: 70px;
                                height: 70px;
                            }
                        }

                        .top-right {
                            width: 78%;

                            .one {
                                font-size: 18px;
                                font-weight: bold;
                            }

                            .two {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }

                            .three {
                                margin-top: 5px;
                                display: flex;
                                justify-content: left;

                                .three-one {
                                    width: 20%;
                                }
                            }
                        }

                    }

                    .bottom {
                        border-top: 1px solid #f2f2f2;
                        padding-top: 10px;
                        margin-top: 5px;
                        display: flex;
                        justify-content: space-between;

                        .bottom-left {
                            width: 22%;
                            text-align: center;

                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

}
</style>
